<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>table3</title>
    <!--   <link rel="stylesheet" type="text/css" href="./layui/css/layui.css"> -->
    <!-- <script src="./layui/layui.js"></script> -->
    <link rel="stylesheet" type="text/css" href="layui\css\layui.css">
    <script src="layui\layui.js"></script>

</head>

<body>
    原始容器
    <table id="demo" lay-filter="test"></table>

    <!--   工具栏模板： -->
    <script type="text/html" id="toolbarDemo">
      <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
        <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
        <button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>
      </div>
    </script>

    <script>
        layui.use('table', function () {
            var table = layui.table;


              //JS 调用：
        table.render({
            elem: '#demo'
            , toolbar: '#toolbarDemo'
            , url: 'https://www.layui.com/demo/table/user/',
        });

        //监听事件
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'add':
                    layer.msg('添加');
                    break;
                case 'delete':
                    layer.msg('删除');
                    break;
                case 'update':
                    layer.msg('编辑');
                    break;
            };
        });
        });
      
    </script>
</body>

</html>